import React from 'react';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'

const PEEPS = [
    {id: 0, name: 'Michelle', friends: [1, 2, 3]},
    {id: 1, name: 'Sean', friends: [0, 3]},
    {id: 2, name: 'Kim', friends: [0, 1, 3],},
    {id: 3, name: 'David', friends: [1, 2]}
];

const find = (id) => {
    return PEEPS.filter(p=> p.id == id)
};

const Person = ({match, location}) => {
    var pid = match.params.pid;
    var p = find(pid)[0];
    return (<div>
        <h3>{p.name}</h3>
        <ul>
            {
                p.friends.map(function (id) {
                    var tmp = find(id)[0];
                    return <li key={id}><Link to={`${match.url}/${id}`}>{tmp.name}</Link></li>
                })
            }
        </ul>
        <div>------------------------------</div>
        <Route path={`${match.url}/:pid`} component={Person}/>
    </div>);
}

const App = ()=> {
    return <Router basename="/ck">
        <Person match={{ params: { pid: 0 }, url: '' }}></Person>
    </Router>;
}

const App2 = ()=> {
    return <Router basename="/ck">
        <div>
            <Route path="/" exact render={()=>{return (<div><Link to="/0">Michelle</Link></div>)}}></Route>
            <Route path="/:pid" component={Person}></Route>
        </div>
    </Router>;
}

export default App2;

